<template>
    <div class="div100 margin24">
        <div style="text-align: center; font-size: 2rem;
          font-weight: 550; margin-bottom: 2rem">
            <span>{{ news.title }}</span>
        </div>

        <div
            style="text-align: center; font-size: 1.2rem; border: 1px dotted lightgrey; height: 3rem; line-height: 3rem">
            <span style="margin-right: .3rem">发布时间: </span>
            <span style="margin-right: 1.5rem">{{ news.pubTime }}</span>
            <span style="margin-right: .3rem">作者: </span>
            <span style="margin-right: 1.5rem">{{ news.author }}</span>
            <span style="margin-right: .3rem">阅读: </span>
            <span>{{ (news.readTimes) }}</span>
        </div>

        <div style="font-size: 1.5rem; line-height: 2.5rem" v-html="content">
        </div>

        <div style="margin-top: 5rem;">
            <h1 style="font-size: 2.5rem; color: #0d5396; margin-bottom: 1rem">发表评论</h1>
            <el-input
                type="textarea"
                :rows="20"
                placeholder="请输入内容"
                v-model="news.content">
            </el-input>
            <div style="margin-top: .5rem">
                <el-button type="primary" style="float: right" @click="pubComment">发表</el-button>
            </div>
        </div>

        <div style="margin-top: 5rem;">
            <h1 style="font-size: 2.5rem; color: #0d5396; margin-bottom: 1rem">评论列表</h1>
            <template v-if="commentList.length > 0">
                <news-comment v-for="item in commentList"
                              :user-name="item.userName"
                              :comment="item.comment"
                              :comment-time="item.commentTime"
                              :key="item.id"></news-comment>
            </template>
            <template v-else>
                <div style="text-align: center; padding: 3rem 0; font-size: 2rem; color: #8b94a2">
                    暂时还没有评论，快来发表吧~~
                </div>
            </template>

        </div>

    </div>
</template>

<script>
	import axios from 'axios'
	axios.defaults.baseURL='/api'
	import NewsComment from '../../components/NewsComment.vue'
	export default{
		components:{NewsComment},
		data() {
			return{
				news:{
				title:'',
				category:'',
				pubTime:'',
				author:'',
				readTimes:0,
				content:'',
				},
				commentList:[]//评论列表
			}
		},
		mounted() {
			//加载新闻详情
			axios.get('news/findOne',{
				params:{
					id:this.$route.params.id
				}
			}).then(response => {
				//console.log(response.data)
				this.news = response.data
			})
			//加载新闻评论
			axios.get('comment',{
				params:{
					newsId:this.$route.params.id
				}
			}).then(response => {
				//console.log(response.data)
				this.commentList = response.data
			})
		}
	}
</script>

<style>
</style>